<template>
  <div class="pagination-container">
    <!-- 分页 -->
    <div class="pagination">
      <div class="size">
        <el-select v-model="pageSize" @change="handleSizeChange">
          <el-option
            v-for="item in pageSizes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="current">
        <div class="pre" v-if="currentPage > 1" @click="handleGoPre">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="pre pre-disabled" v-else>
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="current-size">
          <div class="current-input">
            <el-input
              v-model.trim="currentPage"
              @input="handleCurrentChange"
              @blur="blurInputCurrent"
            ></el-input>
          </div>
          <div class="current-icon">/</div>
          <!-- <div class="current-nums">{{ nums }}</div> -->
          <div class="current-nums">{{ totalPage }}页</div>
        </div>
        <div class="next" v-if="currentPage < totalPage" @click="handleGoNext">
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="next next-disabled" v-else>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>
    <!-- 刷新 -->
    <div class="refresh" @click="hanleRefresh" title="刷新列表">
      <i class="el-icon-refresh"></i>
    </div>
    <!-- 总条数 -->
    <div class="total">共 {{ total }} 条记录</div>
  </div>
</template>

<script>
// import { mapState } from "vuex";
export default {
  name: "pagination",
  props: {
    total: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    current: {
      type: [String, Number],
      default: function() {
        return 1;
      }
    }
  },
  watch: {
    current(val) {
      this.currentPage = val;
    },
    pageSize(val){
        this.currentPage = 1
    }
  },
  data() {
    return {
      pageSize: "15",
      currentPage: this.current,
      timer: null
    };
  },
  computed: {
    pageSizes() {
      return [
        {
          label: "15",
          value: "15"
        },
        {
          label: "30",
          value: "30"
        },
        {
          label: "50",
          value: "50"
        },
        {
          label: "100",
          value: "100"
        },
        {
          label: "150",
          value: "150"
        },
        {
          label: "200",
          value: "200"
        }
      ];
    },
    totalPage() {
      return Math.ceil(Number(this.total) / Number(this.pageSize));
    }
    // nums: function () {
    //     let n = Number(this.total)/Number(this.pageSize)
    //     if (n%this.pageSize > 0) {n++}
    //     return Math.floor(n) || 1
    // }
  },
  methods: {
    // 处理分页容量修改
    handleSizeChange(value) {
      this.$emit("size-change", value);
    },
    // 处理切换当前页
    handleCurrentChange(value) {
      window.addEventListener("keydown", el => {
        if (this.timer) clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          if (el.key == "Enter" || el.code == "Enter" || el.keyCode == 13) {
            if (value > this.totalPage) {this.currentPage = this.totalPage;}
            this.$emit("current-change", this.currentPage);
          }
        }, 2e2);
      });
    },
    blurInputCurrent() {
      if (this.currentPage > this.totalPage) {
        this.currentPage = this.totalPage;
      }
      this.$emit("current-change", this.currentPage);
    },
    // 处理刷新
    hanleRefresh() {
      this.$emit("refresh", true);
    },
    // 翻页
    handleGoPre() {
      this.currentPage--;
      this.$emit("current-change", this.currentPage);
    },
    // 翻页
    handleGoNext() {
      this.currentPage++;
      this.$emit("current-change", this.currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>
// 分页
.pagination-container {
  width: 100%;
  height: 28px;
  line-height: 28px;
  margin: 10px 0;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #637280;
  line-height: 17px;
  .pagination {
    float: left;
    .size {
      float: left;

      /deep/ .el-input__inner {
        background: #f4f4f9;
        border-radius: 4px;
        border: 1px solid #dce0e6;
        width: 67px;
        height: 26px;
        font-size: 12px;
        height: 26px;
      }
      .el-select .el-input {
        line-height: 26px;
        height: 26px;
        font-size: 12px;
      }
    }
    .current {
      float: left;
      width: 157px;
      height: 28px;
      margin-left: 44px;
      .pre,
      .next {
        float: left;
        width: 15px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        margin: 0 5px;
      }
      .pre-disabled,
      .next-disabled {
        cursor: not-allowed !important;
        color: #a9a9a9;
      }
      .current-size {
        float: left;
        width: 100px;
        height: 26px;
        .current-input {
          float: left;
          width: 35px;
          height: 26px;
          margin-left: 5px;
          /deep/.el-input__inner {
            width: 43px;
            height: 26px;
            background: #f4f4f9;
            border-radius: 4px;
            border: 1px solid #dce0e6;
            height: 26px;
            padding: 0 3px;
            text-align: center;
          }
        }
        .current-icon {
          margin-left: 9px;
          float: left;
          width: 5px;
          height: 26px;
          vertical-align: middle;
          line-height: 2;
        }
        .current-nums {
          float: left;
          width: 31px;
          height: 26px;
          line-height: 26px;
          text-align: center;
          margin: 0 14px 0 0;
        }
      }
    }
  }
  .refresh {
    float: left;
    height: 28px;
    line-height: 28px;
    // margin-left: 10px;
    font-size: 16px;
    cursor: pointer;
  }
  .total {
    float: right;
    color: #939eab;
  }
}
</style>